<script lang="ts" setup>
import { getTopNews } from '~/api/home'
import { decode, encode } from '~/utils/base/dataEncry'

const listImg = ref<any[]>([])
const list = ref<any[]>([])
const queryParams = reactive(
  {
    page: {
      rownumber: 4,
      pageNo: 1,
    },
    condition: [{ colName: 'positions', ruleType: 'inset', value: '首页' }],
    positions: '首页',
  },
)
function getData() {
  getTopNews(queryParams).then((res) => {
    res.data.forEach((item) => {
      item.contents = extractTextFromPTags(item.contents)
    })
    listImg.value = res.data.slice(0, 1)
    list.value = res.data.slice(1, 4)
  }).catch(() => {
  })
}
onMounted(() => {
  getData()
})
function clickItem(item) {
  navigateTo({
    path: `/peopleHealth/topNewsDetail`,
    query: {
      id: item.id,
      // data: encode(item),
    },
  })
}
function loadMore() {
  navigateTo({
    path: `/peopleHealth/topNews`,
    query: {
    },
  })
}
function extractTextFromPTags(htmlString: string) {
  const parser = new DOMParser()
  const doc = parser.parseFromString(htmlString, 'text/html')
  const pTags = doc.getElementsByTagName('p')
  let text = ''
  for (let i = 0; i < pTags.length; i++) {
    text += pTags[i]?.textContent
  }
  return text
}
</script>

<template>
  <ClientOnly>
    <div class="h-190 bg-[url('/img/topNews.png')]">
      <div class="flex items-end justify-center pt-30px">
        <span class="mr-10px inline-block h-8px w-8px bg-#0E9472 -mt-15px" />
        <span class="px-2 font-bold" text="#1D2128 22px">头条资讯</span>
        <span class="ml-10px inline-block h-8px w-8px bg-#0E9472 -mt-15px" />
      </div>
      <div class="flex justify-center font-black font-serif -mt-10px" text="#031D2822 26px">
        INFORMATION
      </div>

      <div class="h-78% px-60 py-6">
        <div class="h-100% w-100% flex justify-between">
          <div class="h-100% w-49% bg-white">
            <div v-for="item in listImg" class="h-100% cursor-pointer p-10px" hover="text-#35B389" @click="clickItem(item)">
              <el-image fit="cover" class="h-384px w-full" :src="item.cover_file_name" alt="" />
              <div class="py-10px font-bold" text="16px">
                {{ item.title_name }}
              </div>
              <div class="line-clamp-2 text-ellipsis" text="14px #333" v-html="addControlsList(item.contents)" />
              <div class="flex justify-between py-10px">
                <div text="14px #333">
                  {{ item.release_time }}
                </div>
                <div class="flex cursor-pointer" text="14px #333">
                  <span>详情</span>
                  <img src="/img/more.png" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="h-100% w-49% flex flex-col flex-wrap justify-between">
            <div
              v-for="item in list"
              class="h-31% w-100% cursor-pointer bg-white px-8 py-2"
              hover="border-b-4 border-#35B389 text-#35B389" @click="clickItem(item)"
            >
              <div class="py-10px font-bold" text="16px">
                {{ item.title_name }}
              </div>
              <div class="line-clamp-2 m-10px text-ellipsis" text="14px #333" v-html="addControlsList(item.contents)" />
              <div class="flex justify-between py-10px">
                <div text="14px #333">
                  {{ item.release_time }}
                </div>
                <div class="flex cursor-pointer" text="14px">
                  <span text="14px #333">详情</span>
                  <img src="/img/more.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="my-30px w-140px cursor-pointer py-5px text-center font-medium" text=" #35B389"
            border="1px solid #35B389 rounded-4px" @click="loadMore"
          >
            查看更多
          </div>
        </div>
      </div>
    </div>
  </ClientOnly>
</template>
